<template>
  <div class='center'>
    <div class="longin">
       <div class="avatar">
         <img  src="~assets/img/longin/photo.jpg">
       </div>
       <div>
         <el-form ref="longinFrom" :rules="rules" class="from" :model='longinFrominfo' >
          <el-form-item  prop='username' >
             <el-input v-model="longinFrominfo.username" prefix-icon="iconfont icon-denglu"></el-input>
          </el-form-item>
          <el-form-item prop='password'>
             <el-input type='password' v-model="longinFrominfo.password"  prefix-icon="iconfont icon-mima" ></el-input>
          </el-form-item>
        <el-form-item class="button">
            <el-button type="success" @click="longin">登陆</el-button>
            <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
         </el-form>
       </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'longin',
    data () {
      return {
        longinFrominfo:{
          username:'admin',
          password:'123456'
        },
        rules:{
          user:[
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
        password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '长度最少为6个字符', trigger: 'blur' }
        ]
        }
      }
    },
    methods: {
      reset(){
        this.$refs.longinFrom.resetFields()
      },
      async longin(){
        let validata= await this.$refs.longinFrom.validate()
        if(!validata) return
        const {data}= await this.$http.post('login',this.longinFrominfo)
        if(data.meta.status !== 400){
          this.$message({
          showClose: true,
          message: '登录成功',
          type: 'success'
        })
        //把token保存到当地的
        window.sessionStorage.setItem('token',data.data.token)
        this.$router.push('/home')
        }else{
           this.$message({
          showClose: true,
          message: `${data.meta.msg}`,
          type: 'error'
        })
      
        }
      }
    }
  }
</script>


<style lang="less"  scoped>
   .center{
     height:100vh;
     background-color: rgba(192,192,192,.3);
   }
   .longin{
     width: 600px;
     height: 350px;
     background-color: rgba(255,255,255,.5);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
   }
   .avatar{
       position: absolute;
       left: 50%;
       transform: translate(-50%,-50%);
       border: 1px solid bisque;
       border-radius: 50%;
       padding: 10px;
       box-shadow: 0 0 10px rgba(192,192,192);
     img{
      
       border-radius: 50%;
       width: 200px;
       height: 180px;
       background-size: 100% 100%;
     }
   }
     .from{
        width: 100%;
        position:absolute;
        bottom:15px;
        padding: 0 20px;
        box-sizing: border-box;
        padding-bottom: 15px
      }
      .button{
        display: flex;
        justify-content:flex-end;
      }
</style>